<template>
    <div class="box">
        <div ref="main" :style="{ width: props.width, height: props.height }"></div>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive, defineProps, computed } from 'vue';
import * as echarts from 'echarts';
import chinaMap from '../../assets/json/chinaMap.json'
const props = defineProps({
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '400px'
    }
})
const data = reactive({
    option: {
        geo: {
            show: true,
            type: 'map',
            map: 'china',
            label: {
                show: true,//文字标签显示
                color: '#fff',
                fontSize: 12
            },
            itemStyle: {//地图区域的多边形 图形样式。
                areaColor: '#219edb',
                borderColor: '#fff',
                borderWidth: 1
                // borderWidth: 0.5
            },
            zoom: 1.2,
            emphasis: {//高亮
                label: {
                    show: true,//文字标签显示
                    color: '#fff',
                    fontSize: 14
                },
                itemStyle: {//地图区域的多边形 图形样式。
                    areaColor: '#f60',
                    borderColor: '#ccc',
                    borderWidth: 1
                },
            },
        },
        series: [
            {
                type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
                coordinateSystem: 'geo',
                rippleEffect: {//涟漪特效相关配置
                    period: 2,//动画的周期，秒数
                    brushType: 'stroke',
                    scale: 5,
                },
                label: {//标签
                    normal: {
                        show: true,
                        position: 'right'
                    }
                },
                symbol: 'circle',//标记的图形。
                symbolSize: function (val) {
                    return val[2]
                },
                itemStyle: {
                    color: '#f00'
                },
                data: [//地图数据
                    { name: '盘锦', value: [122.070714, 41.119997, 10] },
                    { name: '宿迁', value: [118.3, 33.96, 20] },
                    { name: '嘉兴', value: [120.76, 30.77, 22] },
                    { name: '张家港', value: [120.555821, 31.875428, 5] },
                    { name: '克拉玛依', value: [84.77, 45.59, 30] },
                    { name: '南充', value: [106.110698, 30.837793, 26] },
                    { name: '义乌', value: [120.06, 29.32, 5] },
                ]
            }
        ]

    }
})
const main = ref(null)
onMounted(() => {
    initCharts()
})

function initCharts() {
    var myChart = echarts.init(main.value);
    //注册可用的地图
    echarts.registerMap('china', chinaMap)


    myChart.setOption(data.option);
    // 图表响应式
    // window.addEventListener('resize', () => {
    //     myChart.resize()
    // })
    window.onresize = () => {
        myChart.resize()
        //如果有多个表变动在下方依次写下去就可以了
    }

}
</script>
  
<style scoped>
.box {
    /* background-color: #eee; */
}
</style>
  